<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7.runtime-dom</title>
</head>
<body>
<div id="app"></div>
<script type="module">
    import {render, h} from "../js/runtime-dom/index.js";

    // const VDom = h("div")
    // const VDom = h("div", {style: {color: 'red'}})
    // const VDom = h("div", {}, h('span'), h('span'), h('span'), h('span'))
    // const VDom = h("div", [h('span'), h('span')])
    // const VDom = h("div", {}, h('span'))
    // const VDom = h("div", {style: {background: 'red'}}, h('span', 'hello world'))
    // const VDom2 = h("p", {style: {background: 'blue'}}, h('span', 'hello world'))
    // 如果父级不一样，直接更换。只做平级的比较。

    // const VDom = h("div", {style: {background: 'red'}, key: 1}, h('span', 'hello world'))
    // const VDom2 = h("p", {style: {background: 'blue'}, key: 2}, h('span', 'hello world'))

    // 更新dom，需要复用dom
    // const VDom = h("div", {style: {background: 'red'}}, h('span', 'hello world'))
    // const VDom2 = h("div", {style: {color: 'blue'}}, h('span', 'hello world'))

    // 从前往后比较(老少新多)
    // const VDom = h("div", [h('div', {key: 'a'}, 'a'), h('div', {key: 'b'}, 'b'), h('div', {key: 'c'}, 'c')])
    // const VDom2 = h("div", [h('div', {key: 'a'}, 'a'), h('div', {key: 'b'}, 'b'), h('div', {key: 'c'}, 'c'), h('div', {key: 'd'}, 'd')])


    // 从后往前比较(老少新多)
    // const VDom = h("div", [h('div', {key: 'a'}, 'a'), h('div', {key: 'b'}, 'b'), h('div', {key: 'c'}, 'c')])
    // const VDom2 = h("div", [h('div', {key: 'd'}, 'd'), h('div', {key: 'a'}, 'a'), h('div', {key: 'b'}, 'b'), h('div', {key: 'c'}, 'c')])

    // 从前往后比较(老多新少)
    // const VDom = h("div", [h('div', {key: 'a'}, 'a'), h('div', {key: 'b'}, 'b'), h('div', {key: 'c'}, 'c'), h('div', {key: 'd'}, 'd'),])
    // const VDom2 = h("div", [h('div', {key: 'a'}, 'a'), h('div', {key: 'b'}, 'b'), h('div', {key: 'c'}, 'c')])

    // 从前往后比较(老多新少)
    // const VDom = h("div", [h('div', {key: 'd'}, 'd'), h('div', {key: 'a'}, 'a'), h('div', {key: 'b'}, 'b'), h('div', {key: 'c'}, 'c'),])
    // const VDom2 = h("div", [h('div', {key: 'a'}, 'a'), h('div', {key: 'b'}, 'b'), h('div', {key: 'c'}, 'c')])

    // 未知序列对比
    // const VDom = h("div", [
    //     h('div', {key: 'a'}, 'a'),
    //     h('div', {key: 'b'}, 'b'),
    //     h('div', {key: 'c', style: {color: 'red'}}, 'c'),
    //     h('div', {key: 'd'}, 'd'),
    //     h('div', {key: 'e'}, 'e'),
    //     h('div', {key: 'q'}, 'q'),
    //     h('div', {key: 'f'}, 'f'),
    //     h('div', {key: 'g'}, 'g'),
    // ])
    // const VDom2 = h("div", [
    //     h('div', {key: 'a'}, 'a'),
    //     h('div', {key: 'b'}, 'b'),
    //     h('div', {key: 'e'}, 'e'),
    //     h('div', {key: 'c', style: {color: 'green'}}, 'c'),
    //     h('div', {key: 'd'}, 'd'),
    //     h('div', {key: 'h'}, 'h'),
    //     h('div', {key: 'f'}, 'f'),
    //     h('div', {key: 'g'}, 'g'),
    // ])
    // render(VDom, app)
    // setTimeout(() => {
    //     render(VDom2, app)
    // }, 1000)

    // text
    import {Text, Fragment} from '../js/runtime-core/index.js'

    // const VNode = h('div', {}, ['hello1', 'hello2'])
    // const VNode = h(Text, {}, ['hello1', 'hello2'])
    const VNode = h(Fragment, {}, ['hello1', 'hello2'])
    render(VNode, app)
    setTimeout(() => {
        const VNode = h(Fragment, {}, ['hello', 'world'])
        render(VNode, app)
    }, 1000)

</script>
</body>
</html>
